<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            // 派生选择器 $("div span")  选取div的所有span(后代)元素   不考虑层次
            var ele = $("div span");
            alert(ele.length); // 4
            // 父子选择器 $("parent > child")  选取parent元素下的child元素
            var ele1 = $("div > span");
            alert(ele1.length); // 1

            // 直接兄弟选择器 $("prev + next")  选取紧接在prev元素后的下第一个兄弟关系的next元素
            var ele2 = $("div span + p");
            alert(ele2.length); // 1

            // 后续全部兄弟节点选择器 $("prev ~ siblings") 选取prev元素后的所有兄弟关系的siblings元素
            var ele3 = $("div span ~ p");
            alert(ele3.length); // 3

        })
    </script>
</head>
<body>
    <div id="content">
        <span></span>
        <p>
            <span></span>
        </p>
        <p>
            <span></span>
        </p>

        <p>
            <span></span>
        </p>
    </div>

</body>
</html>